<template>
  <div class="g-bd3 g-bd3-1 f-cb" >
    <div id="g_top" class="m-top">&nbsp;</div>
    <div id="g_nav" class="m-subnav">&nbsp;</div>
    <div class="g-sd3 g-sd3-1">
      <div class="n-minelst n-minelst-2">
        <h2 class="f-ff1">云音乐特色榜</h2>
        <ul class="f-cb">
          <li :class="['mine', {'z-selected' : index ==flag}]" v-for="(item , index) in musicTop.musicTop1" :key="index" @click="send(item.id , index)">
            <div class="item f-cb">
              <div class="left">
                <a class="avatar" href="javascript:;">
                  <img
                    :src="item.coverImgUrl"
                  />
                  <span class="msk"></span>
                </a>
              </div>
              <p class="name">
                <a href="javascript:;" class="s-fc0">{{item.name}}</a>
              </p>
              <p class="s-fc4">{{item.updateFrequency}}</p>
            </div>
          </li>
        </ul>
        <h2 class="scd f-ff1">全球媒体榜</h2>
        <ul class="f-cb">
          <li :class="['mine', {'z-selected' : index+10  ==flag }]" v-for="(item , index) in musicTop.musicTop2" :key="index" @click="send(item.id , index+10)">
            <div class="item f-cb">
              <div class="left">
                <a class="avatar" href="javascript:;">
                  <img
                    :src="item.coverImgUrl"
                  />
                  <span class="msk"></span>
                </a>
              </div>
              <p class="name">
                <a href="javascript:;" class="s-fc0">{{item.name}}</a>
              </p>
              <p class="s-fc4">{{item.updateFrequency}}</p>
            </div>
          </li>
        </ul>
      </div>
    </div>
      <rightToplist ></rightToplist>
  </div>
</template>
<script>
import {toplist} from '../../../network/discover'

import rightToplist from './right_toplist.vue'

export default {
   data() {
     return {
        musicTop:{musicTop1:[] , musicTop2:[]},
        flag:0
     }
   },
   components:{
        rightToplist,
        
   },
   methods:{
     res_toplist(){
         toplist().then(res => {
           if(this.$route.query.id){
              this.$children[0].res_playlist(this.$route.query.id)
              this.flag = this.$route.query.index
           }else{
              this.$children[0].res_playlist(res.data.list[0].id)
           }
           this.part_Toplist(res.data.list)
        //     res.data.list.forEach(item => {
        //         if(item.ToplistType){
        //           this.musicTop1.push(item)
        //         }else{
        //           this.musicTop2.push(item)
        //         }
        //     })
          })
     },
    part_Toplist(arr){
            arr.forEach(item => {
                if(item.ToplistType){
                  this.musicTop.musicTop1.push(item)
                }else{
                  this.musicTop.musicTop2.push(item)
                }
            })
    },
     send(id , index){
       this.flag = index
        this.$router.push({path:"/home/discover/toplist" , query:{id:id , index:index}})
         this.$children[0].res_playlist(id)
     }
   },
   created(){
      if(this.$store.state.toplistSidebarData.length){
         this.part_Toplist(this.$store.state.toplistSidebarData)
         this.$nextTick(() =>{
           this.$children[0].res_playlist(this.$store.state.toplistSidebarData[0].id)
         })
      }else{
         this.res_toplist()
      }
   }
}
</script>

<style scoped>
@import url("./toplist_css/toplist.css");

</style>